<style scoped lang="scss">
.content{
    width: 100%;
    height: 100%;
    position: relative;
}
    .top{
        width: 90%;
        height: 350px;
        margin: auto;
        .topone{
            width: 100%;
            height: 170px;
            .img1{
                width: 30px;
                height: 40px;
                position: absolute;
                right: 25px;
                top: 55px;
            }
            .doctor{
                position: absolute;
                right:55px;
                top: 55px;
                width: 70px;
                height: 30px;
                background: #4fcb9f;
                text-align: center;
                line-height: 30px;
                span{
                    color: #fff;
                }
            }
            .img2{
                width: 60px;
                position: absolute;
                right: 15px;
                top: 160px;
            }
            .tip_box{
                position: absolute;
                right: 24px;
                top: 160px;
                width: 40px;
                height: 24px;
                background: #3087ea;
                text-align: center;
                line-height: 24px;
                span{
                    color: #fff;
                }
            }
        }
        .toptwo{
            width: 100%;
            height: 170px;
            .img2{
                width: 60px;
                position: absolute;
                right: 15px;
                top: 330px;
            }
            .tip_box{
                position: absolute;
                right: 24px;
                top: 330px;
                width: 40px;
                height: 24px;
                background: #3087ea;
                text-align: center;
                line-height: 24px;
                span{
                    color: #fff;
                }
            }
        }
    }
    .btm{
        width: 90%;
        height: 250px;
        margin: auto;
        // background: #000;
        .spanone{
            font-size: 20px;
            padding: 20px 10px ;
            color: #3087ea;
        }
        .userinfo{
            width: 100%;
            height: 160px;
            // background: red;
            position: relative;
            .img2{
                width: 60px;
                position: absolute;
                right: 0;
                top: 110px;
                z-index: 9999999;
            }
            .tip_box{
                position: absolute;
                right: 10px;
                top: 110px;
                width: 40px;
                height: 24px;
                background: #3087ea;
                text-align: center;
                line-height: 24px;
                z-index: 99999999;
                span{
                    color: #fff;
                }
            }
            .img3{
                // position: fixed;
                position: absolute;
                top: 0;
                top: 0;
                z-index: 999;
            }
            .my{
                position: absolute;
                width: 100%;
                height: 100%;
                // background: #000;
                z-index: 99999;
                display: flex;
                dt{
                    width: 140px;
                    height: 160px;
                    .img{
                        width: 100%;
                        height: 100%;
                        padding: 15px;
                    }
                }
                dd{
                    padding: 10px;
                    h4{
                        font-size: 16px;
                        padding: 5px 0;
                    }
                }
            }
        }
    }
</style>
<template>
    <div class="content">
        <!-- 使用头部组件 -->
        <homeTop :showicon1="false" :showspan1="true"></homeTop>
        <!-- 第一个盒子 -->
        <div class="top">
            <!-- 第一个卡片 -->
            <div class="topone" @click="onwen">
                <img class="img1" src="../../images-wd/image/hdpi/doctor.png" alt="">
                <div class="doctor">
                    <span>有新消息</span>
                </div>
                <img class="img2" src="../../images-wd/image/hdpi/tip_box.png" alt="">
                <div class="tip_box">
                    <span>问诊</span>
                </div>
                <img style="width: 100%;" src="../../images-wd/image/hdpi/inquiry_bg.png" alt="">
            </div>
            <!-- 第二个卡片 -->
            <div class="toptwo" @click="onpatient">
                <img class="img2" src="../../images-wd/image/hdpi/tip_box.png" alt="">
                <div class="tip_box">
                    <span>答辩</span>
                </div>
                <img style="width: 100%;" src="../../images-wd/image/hdpi/promise_bg.png" alt="">
            </div>
        </div>
        <!-- 第二个盒子 -->
        <div class="btm">
            <!-- 标题 -->
            <span class="spanone">我的信息</span>
            <br><br>
            <!-- 第一个卡片 -->
            <div class="userinfo" @click="onmy">
                <img class="img2" src="../../images-wd/image/hdpi/tip_box.png" alt="">
                <div class="tip_box">
                    <span>管理</span>
                </div>
                <img class="img3"style="width: 100%;" src="../../images-wd/image/hdpi/my_information_bg.png" alt="">
                <!-- 用户信息 -->
                <dl class="my">
                    <dt>
                        <!-- 用户头像 -->
                        <!-- <img class="img" :src="listData.imagePic" alt=""> -->
                         <Image class="img" :dataSrc="listData.imagePic" ></Image>
                    </dt>
                    <dd>
                        <!-- 用户名称 -->
                        <h4>{{ listData.name }}</h4>
                        <br>
                        <!-- 入职医院 -->
                        <p>{{ listData.inauguralHospital }}</p>
                        <br>
                        <!-- 职称 -->
                        <p>{{ listData.jobTitle }}</p>
                        <br>
                        <!-- 科室 -->
                        <p>{{ listData.departmentName }}</p>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
// 引入头部组件
    import homeTop from '@/components/homeTop/index.vue'
    import {getinformation} from '@/api/homeapi/index'
    // 引入路由
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import Image from '@/components/image/index.vue'

    // // 用户头像
    // const img=JSON.parse(localStorage.getItem('result')as string).imagePic
    // // 用户名称
    // const name=JSON.parse(localStorage.getItem('result')as string).name
    // // 入职医院
    // const inauguralHospital=JSON.parse(localStorage.getItem('result')as string).inauguralHospital
    // // 职称
    // const jobTitle=JSON.parse(localStorage.getItem('result')as string).jobTitle
    // // 科室
    // const departmentName=JSON.parse(localStorage.getItem('result')as string).departmentName
    // console.log(img);

    const doctorId:any=localStorage.getItem('doctorId')as string
    const sessionId=JSON.parse(localStorage.getItem('sessionId')as string)

    const listData:any=ref('')
    getinformation(doctorId,sessionId).then(res=>{
        console.log(res);
        listData.value=res.data.result
    })

    // 路由
    const router=useRouter()
    // 点击事件 跳转路由
    const onwen=()=>{
        router.push('/consultationlist')
    }
    const onpatient=()=>{
        router.push('/patienthome')
    }
    const onmy=()=>{
        router.push('/my')
    }
</script>